<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07事件监听</title>
</head>
<body>
<button onclick="alert('警告框')">弹出警告框</button>
<button id="btn">我是按钮</button>
<h4>震惊！周一早上发生了这种事情</h4>

<script>
    let buttonE = document.querySelector('#btn');
    buttonE.addEventListener('click', function (){
        alert('按钮被点击了!');
    })
    let h4E = document.querySelector('h4');
    h4E.addEventListener('mouseover', function (){
        console.log('鼠标被悬停了！');
    })
    window.addEventListener('resize', function (){
        alert('窗口大小被重置了！');
    })
    window.addEventListener('scroll', function (){
        alert('窗口被滚动了！');
    })
</script>
</body>
</html>